<template>
    <div class="sanitation">
        <!--地图-->
        <div id="myMap"></div>
        <!-- 头部区域 -->
        <header>
            <!-- 项目标题 -->
            <p class="title-name">
                <span>城市管理市容环卫管理平台</span>
            </p>
            <!-- 环卫道路养护一张图 -->
            <div class="deadline-box">环卫道路养护一张图</div>
            <!-- 头部背景图 -->
            <div class="header-bg"></div>
            <!-- 头部底端光点 -->
            <div class="bottom-light"></div>
            <!-- 中央“环卫道路养护一张图” -->
            <div class="center-text">环卫道路养护一张图</div>
            <!-- 右上角“展开”、“收起”按钮 -->
            <div class="collapse-box">
                <img id="openPage" @click="openPage" src="../../assets/img/sanitation/open.png" alt="展开">
                <img id="closePage" @click="closePage"  src="../../assets/img/sanitation/close.png" alt="收起">
            </div>
        </header>
        <!-- 主体内容 -->
        <section class="main-box">
            <div class="content-area">
                <div class="left-title-name">
                    <span>环卫道路</span>
                </div>
                <div class="right-title-name">
                    <span>公厕管理</span>
                </div>
                <div class="content-area-info">
                    <div class="left-content-row">
                        <!-- 环卫道路 -->
                        <div class="border-box Sanitation-road">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <ul class="road-msg">
                                    <li class="road-item">
                                        <span>
                                            <span>110</span>
                                            <span>条</span>
                                        </span>
                                        <span>道路数量</span>
                                    </li>
                                    <li class="road-item">
                                        <span>
                                            <span>258</span>
                                            <span>km</span>
                                        </span>
                                        <span>道路总长度</span>
                                    </li>
                                    <li class="road-item">
                                        <span>
                                            <span>15.98</span>
                                            <span>km²</span>
                                        </span>
                                        <span>道路总面积</span>
                                    </li>
                                    <li class="road-item">
                                        <span>
                                            <span>45</span>
                                            <span>%</span>
                                        </span>
                                        <span>主城区机扫率</span>
                                    </li>
                                </ul>
                                <div id="roadEchart"></div>
                            </div>
                        </div>
                        <!-- 环卫设施 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>环卫设施</span>
                        </div>
                        <div class="border-box sanitation-facilities">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="bridge-switch-block">
                                    <div id="bridgeSwitchLeft" @click="showTool" class="bridge-switch-left switch-block-active">环卫工具</div>
                                    <div id="bridgeSwitchCenter" @click="showLounge" class="bridge-switch-center switch-block-no">环卫休息室</div>
                                    <div id="bridgeSwitchRight" @click="showLovestation" class="bridge-switch-right switch-block-no">城市/爱心驿站</div>
                                </div>
                                <div class="facilities-box">
                                    <ul class="facilities-msg">
                                        <li class="facilities-item">
                                            <span>
                                                <span>8470</span>
                                                <span>个</span>
                                            </span>
                                            <span>环卫工具总数</span>
                                        </li>
                                        <li class="facilities-item">
                                            <span>
                                                <span>168</span>
                                                <span>条</span>
                                            </span>
                                            <span>覆盖道路数量</span>
                                        </li>
                                        <li class="facilities-item">
                                            <span>
                                                <span>23.50</span>
                                                <span>%</span>
                                            </span>
                                            <span>环卫工具覆盖率</span>
                                        </li>
                                    </ul>
                                </div>
                                <div id="facilitiesEchart"></div>
                            </div>
                        </div>

                        <!-- 环卫车辆名称 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>环卫车辆</span>
                        </div>
                        <!-- 城市桥涵列表 -->
                        <div class="border-box sanitation-vehicle">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="vehicle-box">
                                    <ul class="vehicle-msg">
                                        <li class="vehicle-item">
                                            <span>
                                                <span>8470</span>
                                                <span>辆</span>
                                            </span>
                                            <span>车辆总数</span>
                                        </li>
                                        <li class="vehicle-item">
                                            <span>
                                                <span>168</span>
                                                <span>辆</span>
                                            </span>
                                            <span>日常作业车</span>
                                        </li>
                                        <li class="vehicle-item">
                                            <span>
                                                <span>115</span>
                                                <span>辆</span>
                                            </span>
                                            <span>垃圾清运车</span>
                                        </li>
                                        <li class="vehicle-item">
                                            <span>
                                                <span>115</span>
                                                <span>辆</span>
                                            </span>
                                            <span>除雪车</span>
                                        </li>
                                        <li class="vehicle-item">
                                            <span>
                                                <span>115</span>
                                                <span>辆</span>
                                            </span>
                                            <span>其他车辆</span>
                                        </li>
                                    </ul>
                                </div>
                                <div id="vehicleEchart"></div>
                            </div>
                        </div>
                    </div>
                    <div class="center-content-row"></div>
                    <div class="right-content-row">
                        <!-- 公厕管理 -->
                        <div class="border-box drainage-facilities">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <ul class="block-style">
                                    <li class="item-block">
                                        <span>
                                            <span>21878</span>
                                            <span>座</span>
                                        </span>
                                        <span>公厕总量</span>
                                    </li>
                                    <li class="item-block">
                                        <span>
                                            <span>124</span>
                                            <span>座</span>
                                        </span>
                                        <span>建成区公厕总量</span>
                                    </li>
                                    <li class="item-block">
                                        <span>
                                            <span>70.06</span>
                                            <span>座/km²</span>
                                        </span>
                                        <span>建成区公厕设置密度</span>
                                    </li>
                                </ul>
                                <div id="toiletOneChart"></div>
                                <div class="toiletTwoChart-text">
                                    <p>公厕道路服务覆盖一张图：<span id="roadRate">36%</span></p>
                                    <div id="toiletTwoChart"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 垃圾分类名称 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>垃圾分类</span>
                        </div>
                        <!-- 垃圾分类相关 -->
                        <div class="border-box lamp-statistics">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="lamp-switch-block">
                                    <div id="lampSwitchLeft" @click="showLampcover" class="lamp-switch-left switch-block-active">垃圾分类覆盖</div>
                                    <div id="lampSwitchCenter" @click="showLampsf" class="lamp-switch-center switch-block-no">垃圾分类示范点</div>
                                    <div id="lampSwitchRight" @click="showLampfacilities" class="lamp-switch-right switch-block-no">垃圾处置设施</div>
                                </div>
                                <ul class="lamp-msg">
                                    <li class="lamp-item">
                                        <span>
                                            <span>8470</span>
                                            <span>个</span>
                                        </span>
                                        <span>覆盖总数</span>
                                    </li>
                                    <li class="lamp-item">
                                        <span>
                                            <span>21.68</span>
                                            <span>%</span>
                                        </span>
                                        <span>覆盖率</span>
                                    </li>
                                    <li class="lamp-item">
                                        <span>
                                            <span>35</span>
                                            <span>%</span>
                                        </span>
                                        <span>回收利用率</span>
                                    </li>
                                    <li class="lamp-item">
                                        <span>
                                            <span>268</span>
                                            <span>个</span>
                                        </span>
                                        <span>开展四分类</span>
                                    </li>
                                    <li class="lamp-item">
                                        <span>
                                            <span>1648</span>
                                            <span>个</span>
                                        </span>
                                        <span>垃圾分类桶</span>
                                    </li>
                                </ul>
                                <div id="lampChart"></div>
                            </div>
                        </div>
                        <!-- 道路巡查情况名称 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>道路巡查情况</span>
                            <span id="endTime">截至：2020年10月20日</span>
                        </div>
                        <!-- 道路巡查情况统计图 -->
                        <div class="border-box case-statistics">
                            <div class="top-light-img"></div>
                            <div class="overflow-box road-other-data">
                                <ul class="left-case-data">
                                    <li>
                                        <p>案件总量：<span id="caseNum">676</span>件</p>
                                        <p>已转办：<span id="transferred">124</span>件</p>
                                        <p>未转办：<span id="noTransferred">124</span>件</p>
                                    </li>
                                    <li>
                                        <p>结案率：<span id="closingRate">87%</span></p>
                                        <p>按时：<span id="onTime">87%</span>超时：<span id="overtime">87%</span></p>
                                    </li>
                                </ul>
                                <div id="rightChart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: "Sanitation",
        data(){
            return{

            }
        },
        mounted(){
            // 高德地图初始化
            this.initMap();
            //环卫道路统计图
            this.initRoadChart();
            //环卫设施统计图
            this.initFacilitiesChart();
            //环卫车辆统计图
            this.initVehicleEchart();

            //初始化公厕第一个统计图
            this.initToiletOneChart();
            //初始化公厕第二个统计图
            this.initToiletTwoChart();

            // 初始化信号灯统计图
            this.initLampChart();
            // 初始化道路巡查其他统计统计图
            this.initRoadOtherChart();
        },
        methods:{
            //环卫道路统计图
            initRoadChart(){
                let myChart = this.$echarts.init(document.getElementById('roadEchart'));
                let option = {
                    grid: {
                        left: '4%',
                        right: '0%',
                        top: '22%',
                        bottom: '1%',
                        containLabel: true
                    },
                    legend: {
                        x: 'right',
                        right: '0%',
                        textStyle: {
                            color: '#fff'
                        },
                        itemWidth: 12,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger:'axis',
                        axisPointer:{
                            type: 'shadow'
                        }
                    },
                    dataset: {
                        dimensions: ['product', '一级', '二级', '三级'],
                        source: [
                            {product: '数量(条)', '一级': 43.3, '二级': 85.8, '三级': 93.7},
                            {product: '长度(km)', '一级': 83.1, '二级': 73.4, '三级': 55.1},
                            {product: '面积(km²)', '一级': 100, '二级': 65.2, '三级': 40.5}
                        ]
                    },
                    xAxis: {
                        type: 'category',
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        }
                    },
                    yAxis: {
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: false,
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        // 坐标轴轴线
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            itemStyle: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#BB2EF4'},
                                        {offset: 0.5, color: '#9D1BDF'},
                                        {offset: 1, color: '#7F04CB'}
                                    ]
                                )
                            },
                            label: {
                                show: true,
                                position: 'top',
                                color:'#7F04CB'
                            },
                            barWidth:17
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#2DA9F2'},
                                        {offset: 0.5, color: '#2189D1'},
                                        {offset: 1, color: '#0B8ED7'}
                                    ]
                                )
                            },
                            label: {
                                show: true,
                                position: 'top',
                                color:'#0B8ED7'
                            },
                            barWidth:17
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#F3CD2C'},
                                        {offset: 0.5, color: '#D9A914'},
                                        {offset: 1, color: '#CD9406'}
                                    ]
                                )
                            },
                            label: {
                                show: true,
                                position: 'top',
                                color:'#CD9406'
                            },
                            barWidth:17
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener('resize',function () {
                    myChart.resize()
                })
            },
            //环卫工具按钮
            showTool(){
                this.switchBridgeBlock(1);
            },
            //环卫休息室按钮
            showLounge(){
                this.switchBridgeBlock(2);
            },
            //爱心驿站按钮
            showLovestation(){
                this.switchBridgeBlock(3);
            },
            /**
             * Description:环卫设施按钮切换
             * Author:cy
             * Date:2020/12/17
             */
            switchBridgeBlock(type){
                if (type === 1) {
                    $('#bridgeSwitchLeft').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#bridgeSwitchCenter').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#bridgeSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#tool').show();
                    $('#lounge').hide();
                    $('#city_love_station').hide();
                } else if (type === 2) {
                    $('#bridgeSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#bridgeSwitchCenter').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#bridgeSwitchRight').removeClass('switch-block-no').addClass('switch-block-no');
                    $('#tool').hide();
                    $('#lounge').show();
                    $('#city_love_station').hide();
                } else if (type === 3) {
                    $('#bridgeSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#bridgeSwitchCenter').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#bridgeSwitchRight').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#tool').hide();
                    $('#lounge').hide();
                    $('#city_love_station').show();
                }
            },
            //环卫设施统计图
            initFacilitiesChart(){
                let colorIndex = 0;
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("facilitiesEchart"));
                let option = {
                    grid: {
                        left: "5%",
                        right: "140",
                        bottom: "-10%",
                        top: "10%",
                        containLabel: true
                    },
                    xAxis: {
                        show: false,
                        type: "value"
                    },
                    yAxis: [{
                        type: "category",
                        inverse: true,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: () => {
                                    if (colorIndex === 3) {
                                        colorIndex = 0;
                                    }
                                    colorIndex++;
                                    let colors = ['#FEA529', '#DD4242', '#01ACA8'];
                                    return colors[colorIndex - 1]
                                }, //每个数据的颜色
                                fontWeight: "bold",
                                fontSize: 15,
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        data: ["果皮箱：6469个", "灭烟柱：1039个", "工具箱：665个"]
                    }],
                    series: [{
                        type: "bar",
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                color: (params) => {
                                    let colors = ['#FEA529', '#DD4242', '#01ACA8'];
                                    return colors[params.dataIndex]
                                }, //每个数据的颜色
                                barBorderRadius: [0, 5, 5, 0],
                            }
                        },
                        barCategoryGap: 40,
                        barWidth: 10,
                        data: [20000000, 30000000, 40000000]
                    },
                        {
                            type: "bar",
                            barWidth: 10,
                            barCategoryGap: 40,
                            barGap: "-100%",
                            data: [50000000, 50000000, 50000000],
                            itemStyle: {
                                normal: {
                                    color: "#213973",
                                    barBorderRadius: [0, 5, 5, 0]
                                }
                            },
                            label: {
                                show: true,
                                position: 'right', // 位置
                                fontSize: 14,
                                fontWeight: 'bold', // 加粗
                                distance: 5, // 距离
                                formatter: function(p) {
                                    if (p.dataIndex === 0) {
                                        return '{a|覆盖道路' + 1904 + '条}';
                                    }
                                    if (p.dataIndex === 1) {
                                        return '{b|覆盖道路' + 194 + '条}';
                                    }
                                    if (p.dataIndex === 2) {
                                        return '{c|覆盖道路' + 74 + '条}';
                                    }
                                },
                                rich: {
                                    a: {
                                        color: '#FEA529',
                                        fontSize: 14,
                                        fontWeight: 'bold'
                                    },
                                    b: {
                                        color: '#DD4242',
                                        fontSize: 14,
                                        fontWeight: 'bold'
                                    },
                                    c: {
                                        color: '#01ACA8',
                                        fontSize: 14,
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                        }]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            //环卫车辆统计图
            initVehicleEchart(){
                let colorIndex = 0;
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("vehicleEchart"));
                let option = {
                    tooltip:{
                        trigger:'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    backgroundColor: '#000127',
                    grid: [
                        {
                            top: '11%',
                            bottom: '28%',
                            left: "7%",
                            right: "4%",
                        },
                        {
                            height: 60,
                            bottom: '0.5%'
                        }
                    ],
                    xAxis: [{
                        type: 'category',
                        data: ['洒水车', '扫地车', '雾炮车', '吸尘车', '垃圾车', '垃圾清运车', '垃圾压缩车', '有毒有害清运车', '除雪车', '面包车', '其他车辆', '载货汽车'],
                        gridIndex: 0,
                        // 坐标轴刻度标签
                        axisLabel: {
                            interval:0 ,
                            show: true,
                            textStyle: {
                                color: (params, index) => {
                                    if (index < 4){
                                        return '#FEA529'
                                    } else if (index < 8) {
                                        return '#F34848'
                                    } else if (index == 8) {
                                        return '#01ACA8'
                                    } else {
                                        return '#AA24E8'
                                    }
                                }
                            },
                            formatter: function (val) {
                                var strs = val.split('');  //转化为字符串数组
                                var str = ''
                                for (var i = 0, s; s = strs[i++]; ) {
                                    str += s;
                                    if (!(i % 3))     //两个字符换行
                                        str += '\n';
                                }
                                return str

                            }
                        },
                        // 坐标区域分割线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#4b8aaa'
                            }
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#1f98e5'
                            }
                        },
                        zlevel: 2
                    }, {
                        type: 'category',
                        gridIndex: 1,
                        axisLine: {
                            show: false
                        },
                        zlevel: 1
                    }],
                    yAxis: [{
                        type: 'value',
                        gridIndex: 0,
                        // 坐标轴刻度标签
                        axisLabel: {
                            textStyle: {
                                color: '#64cefe'
                            },
                            fontSize: 10,
                            verticalAlign: 'center'
                        },
                        // 坐标区域分割线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#4b8aaa'
                            }
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#1f98e5'
                            }
                        }
                    },{
                        type: 'value',
                        gridIndex: 1,
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    series: [
                        {
                            data: [10, 15, 18, 30, 25, 23, 32, 50, 40, 33, 36, 57],
                            type: 'bar',
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: (params) => {
                                        if(params.dataIndex<4){
                                            let color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                                                [
                                                    {offset: 0, color: '#FCAF4B'},
                                                    {offset: 1, color: '#F79512'}
                                                ]
                                            );
                                            return color
                                        }else if(params.dataIndex <8){
                                            let color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                                                [
                                                    {offset: 0, color: '#DE4D4D'},
                                                    {offset: 1, color: '#CE2727'}
                                                ]
                                            );
                                            return color
                                        }else if(params.dataIndex == 8) {
                                            let color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                                                [
                                                    {offset: 0, color: '#08BFB9'},
                                                    {offset: 1, color: '#059895'}
                                                ]
                                            );
                                            return color
                                        }else {
                                            let color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                                                [
                                                    {offset: 0, color: '#B329EF'},
                                                    {offset: 1, color: '#8408CF'}
                                                ]
                                            );
                                            return color
                                        }
                                    }
                                }
                            },
                            barWidth:23,
                            xAxisIndex: 0,
                            yAxisIndex: 0
                        },
                        {
                            data: [{
                                name: '日常作业车',
                                value: 1
                            }],
                            label: {
                                show: true,
                                position: 'inside',
                                formatter: '{b}',
                                offset: [0, 10],
                                textStyle: {
                                    color: '#FEA529'
                                }
                            },
                            type: 'bar',
                            barGap: 0,
                            barWidth: '34%',
                            itemStyle: {
                                normal: {
                                    color: "rgba(0, 0, 0, 0)"
                                }
                            },
                            xAxisIndex: 1,
                            yAxisIndex: 1
                        },{
                            data: [{
                                name: '垃圾清运车',
                                value: 1
                            }],
                            label: {
                                show: true,
                                position: 'inside',
                                formatter: '{b}',
                                offset: [0, 10],
                                textStyle: {
                                    color: '#F34848'
                                }
                            },
                            type: 'bar',
                            barGap: 0,
                            barWidth: '39.1%',
                            itemStyle: {
                                normal: {
                                    color: "rgba(0, 0, 0, 0)"
                                }
                            },
                            xAxisIndex: 1,
                            yAxisIndex: 1
                        },{
                            data: [{
                                name: '除雪车',
                                value: 1
                            }],
                            label: {
                                show: true,
                                position: 'inside',
                                formatter: '{b}',
                                offset: [0, 10],
                                textStyle: {
                                    color: '#01ACA8'
                                }
                            },
                            type: 'bar',
                            barGap: 0,
                            barWidth: '13.5%',
                            itemStyle: {
                                normal: {
                                    color: "rgba(0, 0, 0, 0)"
                                }
                            },
                            xAxisIndex: 1,
                            yAxisIndex: 1
                        },{
                            data: [{
                                name: '其他车辆',
                                value: 1
                            }],
                            label: {
                                show: true,
                                position: 'inside',
                                formatter: '{b}',
                                offset: [0, 10],
                                textStyle: {
                                    color: '#A420E4'
                                }
                            },
                            type: 'bar',
                            barGap: 0,
                            barWidth: '23%',
                            itemStyle: {
                                normal: {
                                    color: "rgba(0, 0, 0, 0)"
                                }
                            },
                            xAxisIndex: 1,
                            yAxisIndex: 1
                        }]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            //初始化公厕第一个统计图
            initToiletOneChart(){
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("toiletOneChart"));
                let option = {
                    grid: {
                        left: "3%",
                        right: "120",
                        bottom: "-10%",
                        top: "10%",
                        containLabel: true
                    },
                    xAxis: {
                        show: false,
                        type: "value"
                    },
                    yAxis: [{
                        type: "category",
                        inverse: true,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color : '#01ACA8',
                                fontWeight: "bold",
                                fontSize: 15,
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        data: ["土建：1999座"]
                    }],
                    series: [{
                        type: "bar",
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                color: '#01ACA8',
                                barBorderRadius: [0, 5, 5, 0],
                            }
                        },
                        barCategoryGap: 40,
                        barWidth: 10,
                        data: [10000000]
                    },
                        {
                            type: "bar",
                            barWidth: 10,
                            barCategoryGap: 40,
                            barGap: "-100%",
                            data: [50000000],
                            itemStyle: {
                                normal: {
                                    color: "#FEA529",
                                    barBorderRadius: [0, 5, 5, 0]
                                }
                            },
                            label: {
                                show: true,
                                position: 'right', // 位置
                                fontSize: 14,
                                fontWeight: 'bold', // 加粗
                                distance: 5, // 距离
                                formatter: function(p) {
                                    if(p.dataIndex === 0){
                                        return '{a|移动：'+1904+'座}';
                                    }
                                },
                                rich: {
                                    a: {
                                        color: '#FEA529',
                                        fontSize: 14,
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                        }]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            /**
             * Description:
             * Author:cy
             * Date:2020/12/17
             */
            initToiletTwoChart(){
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("toiletTwoChart"));
                let option = {
                    grid: {
                        left: "3%",
                        right: "150",
                        bottom: "-20%",
                        top: "36%",
                        containLabel: true
                    },
                    xAxis: {
                        show: false,
                        type: "value"
                    },
                    yAxis: [{
                        type: "category",
                        inverse: true,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color : '#01ACA8',
                                fontWeight: "bold",
                                fontSize: 15,
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        data: ["道路公测：1999座"]
                    }],
                    series: [{
                        type: "bar",
                        zlevel: 1,
                        itemStyle: {
                            normal: {
                                color: '#01ACA8',
                                barBorderRadius: [0, 5, 5, 0],
                            }
                        },
                        barCategoryGap: 40,
                        barWidth: 10,
                        data: [20000000]
                    },
                        {
                            type: "bar",
                            barWidth: 10,
                            barCategoryGap: 40,
                            barGap: "-100%",
                            data: [50000000],
                            itemStyle: {
                                normal: {
                                    color: "#FEA529",
                                    barBorderRadius: [0, 5, 5, 0]
                                }
                            },
                            label: {
                                show: true,
                                position: 'right', // 位置
                                fontSize: 14,
                                fontWeight: 'bold', // 加粗
                                distance: 5, // 距离
                                formatter: function(p) {
                                    console.log(p)
                                    if(p.dataIndex === 0){
                                        return '{a|公园公厕：'+1904+'座}';
                                    }
                                },
                                rich: {
                                    a: {
                                        color: '#FEA529',
                                        fontSize: 14,
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                        }]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            //垃圾分类覆盖
            showLampcover(){
                this.switchLampBlock(1);
            },
            //垃圾分类示范点
            showLampsf(){
                this.switchLampBlock(2);
            },
            //垃圾分类设施
            showLampfacilities(){
                this.switchLampBlock(3);
            },
            // 初始化信号灯统计图
            initLampChart(){
                let myChart = this.$echarts.init(document.getElementById("lampChart"));
                myChart.clear();
                let option = {
                    tooltip:{
                        trigger:'axis',
                        axisPointer:{
                            type:'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '3%',
                        top: '20%',
                        bottom: '6%',
                        containLabel: true
                    },
                    legend: {
                        right: '3%',
                        top:'5%',
                        data:['数量', '覆盖率'],
                        textStyle: {
                            color: '#fff'
                        },
                        itemWidth: 15

                    },
                    xAxis: {
                        type: 'category',
                        data: ['小区', '党政机关', '学校', '相关企业', '医院', '公共场所'],
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        // 坐标区域分割线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#4b8aaa'
                            }
                        },
                        // 坐标轴轴线
                        axisLine: {
                            lineStyle: {
                                color: '#1f98e5'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            // 坐标轴刻度标签
                            axisLabel: {
                                textStyle: {
                                    color: '#64cefe'
                                },
                                fontSize: 10,
                                verticalAlign: 'center'
                            },
                            // 坐标区域分割线
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#4b8aaa'
                                }
                            },
                            // 坐标轴轴线
                            axisLine: {
                                lineStyle: {
                                    color: '#1f98e5'
                                }
                            }
                        },
                        {
                            type: 'value',
                            min: 10,
                            max: 60,
                            // 坐标轴刻度标签
                            axisLabel: {
                                textStyle: {
                                    color: '#64cefe'
                                },
                                formatter: '{value} %',
                                fontSize: 10
                            },
                            // 坐标区域分割线
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                // 是否显示刻度线
                                show: false
                            },
                            // 坐标轴轴线
                            axisLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#1f98e5'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '数量',
                            color: '#f7a542',
                            data: [200, 260, 300, 235, 180, 250],
                            type: 'bar',
                            barWidth: '35px',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [9, 9, 0, 0]
                                }
                            }
                        },
                        {
                            name: '覆盖率',
                            type: 'line',
                            data: [130, 100, 170, 25, 130, 100],
                            symbol: 'circle',
                            symbolSize: 7,
                            lineStyle: {
                                color: '#da4443',
                                width: 2,
                                borderColor: '#da4443',
                            }
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            // 初始化道路巡查其他统计统计图
            initRoadOtherChart(){
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("rightChart"));
                let index = 0;
                let colorList = ['#9e101e', '#a02713', '#a04212', '#a0570e', '#eaad1b'];
                let option = {
                    legend: {
                        show: false
                    },
                    grid: {
                        left: '42%',
                        right: '5%',
                        top: '5%',
                        bottom: '5%',
                    },
                    xAxis: {
                        type: 'value',

                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }

                    },
                    yAxis: {
                        type: 'category',
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisPointer: {
                            label: {
                                show: true,
                                margin: 30
                            }
                        },
                        data: ['垃圾堆积', '共享单车乱停放', '井盖丢失', '道路破损', '交通标线不清楚'],
                        axisLabel: {
                            margin: 140,
                            fontSize: 14,
                            align: 'left',
                            color: '#ffffff',
                            rich: {
                                a1: {
                                    color: '#fff',
                                    backgroundColor: colorList[0],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a2: {
                                    color: '#fff',
                                    backgroundColor: colorList[1],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a3: {
                                    color: '#fff',
                                    backgroundColor: colorList[2],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a4: {
                                    color: '#fff',
                                    backgroundColor: colorList[3],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a5: {
                                    color: '#fff',
                                    backgroundColor: colorList[4],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                }
                            },
                            formatter: function(params) {
                                index++;
                                if (index > 5) {
                                    index = 1
                                }
                                return [
                                    '{a' + index + '|' + index + '}' + '  ' + params
                                ].join('\n')
                            }
                        }
                    },
                    series: [{
                        z: 2,
                        name: 'value',
                        type: 'bar',
                        data: [3.66, 2.86, 1.82, 1.8, 1.53].map((item, i) => {
                            let itemStyle = {
                                color: colorList[i]
                            }
                            return {
                                value: item,
                                itemStyle: itemStyle
                            };
                        }),
                        barWidth: 15,
                        label: {
                            show: true,
                            position: [0,2],
                            color: '#ffffff',
                            fontSize: 12,
                            offset: [5, 0]
                        }
                    }

                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            /**
             * Description:垃圾分类切换触发
             * Author:cy
             * Date:2020/12/18
             */
            switchLampBlock(type){
                if (type === 1) {
                    $('#lampSwitchLeft').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#lampSwitchCenter').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#lampSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#wastesort_cover').show();
                    $('#wastesort_sf').hide();
                    $('#waste_facilities').hide();
                } else if (type === 2) {
                    $('#lampSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#lampSwitchCenter').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#lampSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#wastesort_cover').hide();
                    $('#wastesort_sf').show();
                    $('#waste_facilities').hide();
                } else if (type === 3) {
                    $('#lampSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#lampSwitchCenter').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#lampSwitchRight').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#wastesort_cover').hide();
                    $('#wastesort_sf').hide();
                    $('#waste_facilities').show();
                }
            },
            /**
             * Description:高德地图初始化
             * Author:cy
             * Date:2020/12/17
             */
            initMap() {
                let GDMap = new AMap.Map("myMap", {
                    mapStyle: "amap://styles/6f8a9c431c03a423de43182d250f1a75",
                    zoom: 14,
                    viewMode: "3D",
                    center: [108.976877, 34.222629],
                    features: ["bg", "road", "building"],
                    resizeEnable: true
                });
                GDMap.setFitView();// 执行定位
            },
            /**
             * Description:右上角展开和关闭
             * Author:cy
             * Date:2020/12/17
             */
            openPage(){
                $('#openPage').css('display', 'none');
                $('#closePage').css('display', 'block');
                $('.left-content-row').css('transform', 'translateX(0px)');
                $('.left-content-row').css('transition', 'transform 0.4s');
                $('.right-content-row').css('transform', 'translateX(0px)');
                $('.right-content-row').css('transition', 'transform 0.4s');
                $('.left-title-name').css('transform', 'translateX(0px)');
                $('.left-title-name').css('transition', 'transform 0.4s');
                $('.right-title-name').css('transform', 'translateX(0px)');
                $('.right-title-name').css('transition', 'transform 0.4s');

                $('#legend').css('transform', 'translateY(0px)');
                $('#legend').css('transition', 'transform 0.4s');
            },
            closePage(){
                $('#openPage').css('display', 'block');
                $('#closePage').css('display', 'none');
                $('.left-content-row').css('transform', 'translateX(-7.5rem)');
                $('.left-content-row').css('transition', 'transform 0.4s');
                $('.right-content-row').css('transform', 'translateX(7.5rem)');
                $('.right-content-row').css('transition', 'transform 0.4s');
                $('.left-title-name').css('transform', 'translateX(-7.5rem)');
                $('.left-title-name').css('transition', 'transform 0.4s');
                $('.right-title-name').css('transform', 'translateX(7.5rem)');
                $('.right-title-name').css('transition', 'transform 0.4s');

                setTimeout( () => {
                    $('#legend').css('transform', 'translateY(3.375rem)');
                    $('#legend').css('transition', 'transform 0.4s');
                },300)
            },
        }
    }
</script>

<style scoped lang="less">
.sanitation{
    display: flex;
    flex-direction: column;
    background-color: #04093f;
    line-height: 1.15;
    position: relative;
    overflow-x: hidden;
    cursor: default;
    height: 13.5rem;
    width: 100%;
    #myMap {
        width: 24rem;
        height: 13.5rem;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    /* 头部样式 */
    header {
        height: 1.375rem; // 110px
        padding-top: 0.32rem;
        position: relative;
        background: linear-gradient(to bottom, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.9));
        z-index: 99;
        .title-name{
            height: 1.125rem;
            line-height: 1.125rem;
            text-align: center;
            span {
                font-size: 0.7125rem;
                /* 引入外部字体样式 */
                font-family: 'MF-FangHei';
                background: linear-gradient(to right, #0178f7, #00ebfe, #00ebfe, #00a9ff);
                -webkit-background-clip: text;
                color: transparent;
            }
        }
        .deadline-box{
            position: absolute;
            left: 0.25rem;
            top: 0.3rem;
            width: 2.7875rem;
            height: 0.525rem;
            line-height: 0.525rem;
            text-align: center;
            color:#08faf5;
            font-family: 'FZLTZH_GBK';
            font-size: 0.22rem;
            background: url(../../assets/img/sanitation/small-border.png) no-repeat;
            z-index: 100;
        }
        .header-bg{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 0.7375rem;
            background: url(../../assets/img/sanitation/header-border.png) no-repeat;
            background-size: 100% 100%;
        }
        .bottom-light{
            position: absolute;
            bottom: -0.8125rem;
            left: calc(50% - 4.7875rem);
            width: 9.5875rem;
            height: 1.6625rem;
            background: url(../../assets/img/sanitation/big-light.png) no-repeat;
            background-size: 100% 100%;
            z-index: 100;
        }
        .center-text{
            position: absolute;
            left: calc(50% - 2.05rem);
            top: 1.35rem; // 108px
            width: 4.1rem;
            height: 0.7625rem;
            line-height: 0.7625rem;
            text-align: center;
            color:#08faf5;
            font-family: 'FZLTZH_GBK';
            font-size: 0.35rem;
            background: url(../../assets/img/sanitation/big-border.png) no-repeat;
        }
        .collapse-box{
            position: absolute;
            top: 0.15rem;
            right: 0.275rem;
            img{
                width: 0.4rem; // 32px
                height: 0.325rem; // 26px
                cursor: pointer;
            }
            #openPage{
                display: none;
            }
            #closePage{
                display: block;
            }
        }
    }

    /* 主体内容样式 */
    .main-box{
        display: flex;
        flex: 1;
        font-family: 'FZLTZH_GBK';
        .content-area{
            display: flex;
            flex: 1;
            position: relative;
            .left-title-name{
                position: absolute;
                left: 0.25rem;
                top: -0.7875rem;
                width: 7.15rem;
                height: 0.975rem;
                background: url(../../assets/img/sanitation/left-title.png) no-repeat;
                background-size: 100% 100%;
                color: #08faf5;
                font-size: 0.2625rem;
                z-index: 100;
                span{
                    position: absolute;
                    bottom: 0.1375rem;
                    left: 3.125rem; // 250px
                }
            }
            .right-title-name{
                position: absolute;
                right: 0.25rem;
                top: -0.7875rem;
                width: 7.15rem;
                height: 0.975rem;
                background: url(../../assets/img/sanitation/right-title.png) no-repeat;
                background-size: 100% 100%;
                color: #08faf5;
                font-size: 0.2625rem;
                z-index: 100;
                span{
                    position: absolute;
                    bottom: 0.1375rem;
                    right: 2.85rem; // 228px
                }
            }
        }
        .content-area-info{
            display: flex;
            flex-direction: row;
            flex: 1;
            overflow: hidden;
            /* 主体内容公共样式——开始 */
            .border-box{
                border: 1px solid #18397b;
                position: relative;
                margin-top: 0.125rem;
                .top-light-img{
                    position: absolute;
                    top: 0;
                    left: calc(50% - 3.5rem);
                    width: 7rem;
                    height: 0.9625rem;
                    background: url(../../assets/img/sanitation/light1.png) no-repeat;
                    background-size: 100% 100%;
                }
                .bottom-light-img{
                    position: absolute;
                    top: -0.4125rem;
                    left: calc(50% - 2.9375rem);
                    width: 6.2125rem;
                    // width: 5.875rem;
                    height: 0.975rem;
                    background: url(../../assets/img/sanitation/light2.png) no-repeat;
                    background-size: 100% 100%;
                    z-index: -1;
                }
                .overflow-box{
                    position: relative;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    font-size: 0.2325rem;
                    /* 选中的切换块样式 */
                    .switch-block-active{
                        font-size: 0.2325rem;
                        color: #FEA529;
                    }
                    /* 未选中的切换块样式 */
                    .switch-block-no{
                        font-size: 0.2rem;
                        color:#ceced5;
                    }
                }
            }
            /* 小标题名称样式 */
            .every-title-name{
                position: relative;
                width: 100%;
                height: 0.575rem;
                line-height: 0.575rem;
                text-align: center;
                color: #08faf5;
                font-size: 0.2625rem;
                #endTime{
                    position: absolute;
                    top: 0.0625rem;
                    right: 0.125rem;
                    color: #ffffff;
                    font-size: 0.15rem;
                }
            }
            /* 块元素样式 */
            .block-style{
                height: 1.1875rem; // 95px
                padding: 0.1rem 0;
                display: flex;
                flex-direction: row;
                li{
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    justify-content: center;
                    align-items: center;
                }
                .item-block{
                    border-left: 1px solid #18397b;
                    span:first-of-type{
                        span:first-of-type{
                            font-size: 0.3rem; // 24px
                            color: #FEA529;
                            margin-right: 0.075rem;
                        }
                        span:last-of-type{
                            font-size: 0.2rem;
                            color: #ffffff;
                        }
                    }
                    span:last-of-type{
                        font-size: 0.2rem; // 16px
                        color: #ffffff;
                        margin-top: 0.0625rem;
                    }
                }
                .item-name{
                    font-size: 0.225rem; // 18px
                    color: #23bcef;
                }
            }
            /* 主体内容公共样式——结束 */
            .left-content-row{
                display: flex;
                flex-direction: column;
                width: 7.4rem;
                padding: 0.1875rem 0 0.1875rem 0.25rem;
                background: linear-gradient(to right, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.85));
                z-index: 10;
                /* 环卫道路 */
                .Sanitation-road{
                    display: flex;
                    flex-direction: column;
                    height: 2.4125rem;
                    .overflow-box{
                        padding: 0.2rem 0.15rem 0.2rem 0.2rem;
                        flex-direction: initial;
                        align-items: center;
                        ul.road-msg{
                            width: 3.3125rem;
                            height:2.025rem;
                            display:flex;
                            flex-direction: row;
                            align-items: center;
                            flex-wrap: wrap;
                            border-right: 1px solid #18397b;
                            li.road-item{
                                width:1.6rem;
                                height:1.025rem;
                                display: flex;
                                flex-direction: column;
                                //flex: 1;
                                justify-content: center;
                                align-items: center;
                                &:nth-of-type(2){
                                    border-left: 1px solid #18397b;
                                    box-sizing: border-box;
                                }
                                &:nth-of-type(3){
                                    border-top: 1px solid #18397b;
                                    box-sizing: border-box;
                                }
                                &:nth-of-type(4){
                                    border-left: 1px solid #18397b;
                                    border-top: 1px solid #18397b;
                                    box-sizing: border-box;
                                }
                                span:first-of-type{
                                    span:first-of-type{
                                        font-size: 0.3rem;
                                        color: #FEA529;
                                        margin-right: 0.075rem;
                                    }
                                    span:last-of-type{
                                        font-size: 0.2rem;
                                        color: #ffffff;
                                    }
                                }
                                span:last-of-type{
                                    font-size: 0.2rem;
                                    color: #ffffff;
                                    margin-top: 0.0625rem;
                                }
                            }
                        }
                        #roadEchart{
                            width: 3.4625rem;
                            height:2.175rem;
                            box-sizing: border-box;
                        }
                    }
                }
                //环卫设施
                .sanitation-facilities{
                    height:3.1875rem;
                    display: flex;
                    flex-direction: column;
                    .overflow-box{
                        .bridge-switch-block{
                            position: relative;
                            height: 0.5625rem;
                            border-bottom: 1px solid #18397b;
                            line-height: 0.575rem;
                            display: flex;
                            .bridge-switch-left{
                                width: 2.625rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .bridge-switch-center{
                                position: absolute;
                                top: 0;
                                left: 2.1625rem;
                                width: 2.9rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            .bridge-switch-right{
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 2.575rem;
                                height: 0.55rem;
                                text-align: center;
                                cursor: pointer;
                            }
                            /* 选中的切换块样式 */
                            .bridge-switch-left.switch-block-active{
                                background: url(../../assets/img/sanitation/3-1-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .bridge-switch-center.switch-block-active{
                                background: url(../../assets/img/sanitation/3-2-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .bridge-switch-right.switch-block-active{
                                background: url(../../assets/img/sanitation/3-3-1.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            /* 未选中的切换块样式 */
                            .bridge-switch-left.switch-block-no{
                                background: url(../../assets/img/sanitation/3-1-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .bridge-switch-center.switch-block-no{
                                background: url(../../assets/img/sanitation/3-2-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                            .bridge-switch-right.switch-block-no{
                                background: url(../../assets/img/sanitation/3-3-2.png) no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .facilities-box{
                            padding: 0 0.2rem;
                            ul.facilities-msg{
                                height:1.225rem;
                                border-bottom: 1px solid #18397b;
                                display:flex;
                                flex-direction: row;
                                align-items: center;
                                li.facilities-item{
                                    height:0.9rem;
                                    display: flex;
                                    flex-direction: column;
                                    flex: 1;
                                    justify-content: center;
                                    align-items: center;
                                    &:nth-of-type(2){
                                        border-left: 1px solid #18397b;
                                        border-right: 1px solid #18397b;
                                        box-sizing: border-box;
                                    }
                                    span:first-of-type{
                                        span:first-of-type{
                                            font-size: 0.3rem;
                                            color: #FEA529;
                                            margin-right: 0.075rem;
                                        }
                                        span:last-of-type{
                                            font-size: 0.2rem;
                                            color: #ffffff;
                                        }
                                    }
                                    span:last-of-type{
                                        font-size: 0.2rem;
                                        color: #ffffff;
                                        margin-top: 0.0625rem;
                                    }
                                }
                            }
                        }
                        #facilitiesEchart{
                            height:1.375rem;
                        }
                    }
                }

                //环卫车辆
                .sanitation-vehicle{
                    height:4.3rem;
                    .overflow-box{
                        .vehicle-box{
                            padding: 0 0.2rem;
                            ul.vehicle-msg{
                                height:1.225rem;
                                border-bottom: 1px solid #18397b;
                                display:flex;
                                flex-direction: row;
                                align-items: center;
                                li.vehicle-item{
                                    height:0.9rem;
                                    display: flex;
                                    flex-direction: column;
                                    flex: 1;
                                    justify-content: center;
                                    align-items: center;
                                    &:nth-of-type(2),&:nth-of-type(4){
                                        border-left: 1px solid #18397b;
                                        border-right: 1px solid #18397b;
                                        box-sizing: border-box;
                                    }
                                    span:first-of-type{
                                        span:first-of-type{
                                            font-size: 0.3rem;
                                            color: #FEA529;
                                            margin-right: 0.075rem;
                                        }
                                        span:last-of-type{
                                            font-size: 0.2rem;
                                            color: #ffffff;
                                        }
                                    }
                                    span:last-of-type{
                                        font-size: 0.2rem;
                                        color: #ffffff;
                                        margin-top: 0.0625rem;
                                    }
                                }
                            }
                        }
                        #vehicleEchart{
                            width: 100%;
                            height:3.05rem;
                        }
                    }
                }


                /* 消防栓统计 */
                /* 其他统计（标识牌、隔离设施等） */
                .other-statistics{
                    display: flex;
                    flex-direction: column;
                    height: 3.2125rem; // 257px
                    .other-switch-block{
                        position: relative;
                        height: 0.5625rem;
                        border-bottom: 1px solid #18397b;
                        line-height: 0.575rem;
                        display: flex;
                        .other-switch-left{
                            width: 1.7rem;
                            height: 0.55rem;
                            text-align: center;
                            cursor: pointer;
                        }
                        .other-switch-center1{
                            position: absolute;
                            top: 0;
                            left: 1.325rem;
                            width: 1.75rem;
                            height: 0.55rem;
                            text-align: center;
                            cursor: pointer;
                        }
                        .other-switch-center2{
                            position: absolute;
                            top: 0;
                            left: 2.675rem;
                            width: 1.7875rem;
                            height: 0.55rem;
                            text-align: center;
                            cursor: pointer;
                        }
                        .other-switch-right{
                            position: absolute;
                            top: 0;
                            right: 1.2125rem;
                            width: 1.875rem;
                            height: 0.55rem;
                            text-align: center;
                            cursor: pointer;
                        }
                        .other-switch-right1{
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 1.6625rem;
                            height: 0.55rem;
                            text-align: center;
                            cursor: pointer;
                        }
                        /* 选中的切换块样式 */
                        .other-switch-left.switch-block-active{
                            background: url(../../assets/img/sanitation/2-1-1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .other-switch-center1.switch-block-active{
                            background: url(../../assets/img/sanitation/2-2-1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .other-switch-center2.switch-block-active{
                            background: url(../../assets/img/sanitation/2-3-1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .other-switch-right.switch-block-active{
                            background: url(../../assets/img/sanitation/2-4-1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .other-switch-right1.switch-block-active{
                            background: url(../../assets/img/sanitation/2-5-1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        /* 未选中的切换块样式 */
                        .other-switch-left.switch-block-no{
                            background: url(../../assets/img/sanitation/2-1-2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .other-switch-center1.switch-block-no{
                            background: url(../../assets/img/sanitation/2-2-2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .other-switch-center2.switch-block-no{
                            background: url(../../assets/img/sanitation/2-3-2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .other-switch-right.switch-block-no{
                            background: url(../../assets/img/sanitation/2-4-2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .other-switch-right1.switch-block-no{
                            background: url(../../assets/img/sanitation/2-5-2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                    .descript-chart{
                        display: flex;
                        flex-direction: row;
                        width: 100%;
                        height: 3.2125rem;
                        .left-content{
                            width: 3.25rem; // 260px
                            border-right: 1px solid #18397b;
                            li{
                                height: 0.875rem; // 70px
                                line-height: 0.875rem;
                                padding-left: 0.25rem;
                                span:nth-of-type(1){
                                    font-size: 0.2rem; // 16px
                                    color: #ffffff;
                                }
                                span:nth-of-type(2){
                                    font-size: 0.3rem; // 24px
                                    color: #23bcef;
                                    margin-right: 0.0625rem;

                                }
                                span:nth-of-type(3){
                                    font-size: 0.2rem;
                                    color: #ffffff;
                                }
                            }
                            li + li{
                                border-top: 1px solid #18397b;
                            }
                        }
                        #otherChart{
                            width: 3.875rem; // 310px
                            height: 2.625rem; // 210px
                        }
                    }
                }
                .city-bridge{
                    display: flex;
                    flex-direction: column;
                    height: 2.9125rem;
                    .bridge-switch-block{
                        position: relative;
                        height: 0.5625rem;
                        border-bottom: 1px solid #18397b;
                        line-height: 0.575rem;
                        display: flex;
                        .bridge-switch-left{
                            width: 2.625rem;
                            height: 0.55rem;
                            text-align: center;
                            cursor: pointer;
                        }
                        .bridge-switch-center{
                            position: absolute;
                            top: 0;
                            left: 2.1625rem;
                            width: 2.9rem;
                            height: 0.55rem;
                            text-align: center;
                            cursor: pointer;
                        }
                        .bridge-switch-right{
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 2.575rem;
                            height: 0.55rem;
                            text-align: center;
                            cursor: pointer;
                        }
                        /* 选中的切换块样式 */
                        .bridge-switch-left.switch-block-active{
                            background: url(../../assets/img/sanitation/3-1-1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .bridge-switch-center.switch-block-active{
                            background: url(../../assets/img/sanitation/3-2-1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .bridge-switch-right.switch-block-active{
                            background: url(../../assets/img/sanitation/3-3-1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        /* 未选中的切换块样式 */
                        .bridge-switch-left.switch-block-no{
                            background: url(../../assets/img/sanitation/3-1-2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .bridge-switch-center.switch-block-no{
                            background: url(../../assets/img/sanitation/3-2-2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .bridge-switch-right.switch-block-no{
                            background: url(../../assets/img/sanitation/3-3-2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                    .table-head{
                        color:#23bcef;
                        height: 0.575rem;
                        line-height: 0.575rem;
                        tr{
                            height: 0.575rem;
                            line-height: 0.575rem;
                        }
                    }
                    .table-body{
                        height: 1.75rem; // 140px
                        color: #fff;
                        overflow: hidden;
                        tr{
                            height: 0.575rem;
                            line-height: 0.575rem;
                        }
                    }
                    .table-head,.table-body{
                        font-size: 0.2rem;
                        text-align: center;
                        table{
                            border-collapse: collapse;
                            tr {
                                td{
                                    font-weight: normal !important;
                                    border-bottom: 1px solid #18397b;
                                }
                                td:nth-of-type(1){
                                    width: 2.5rem; // 200px
                                }
                                td:nth-of-type(2){
                                    width: 3.125rem; // 250px
                                }
                                td:nth-of-type(3){
                                    width: 1.5rem; // 120px
                                }
                            }
                        }
                    }
                }
            }
            .center-content-row{
                flex: 1;
                // width: 9.125rem; // 730px
            }
            .right-content-row{
                display: flex;
                flex-direction: column;
                width: 7.4rem;
                padding: 0.1875rem 0.25rem 0.1875rem 0;
                background: linear-gradient(to left, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.85));
                z-index: 10;
                /* 城市排水设施 */
                .drainage-facilities{
                    display: flex;
                    flex-direction: column;
                    height: 2.9625rem;
                    #toiletOneChart{
                        height: 0.7875rem;
                        border-top: 1px solid #18397b;
                    }
                    .toiletTwoChart-text{
                        height: 1rem;
                        border-top: 1px solid #18397b;
                        font-size: 0.1875rem;
                        color: #FEA529;
                        p {
                            padding-left: 0.1875rem;
                            margin-top: 0.2125rem;
                            #roadRate {
                                border-bottom: 1px solid #FEA529;
                                cursor: pointer;
                            }
                        }
                        #toiletTwoChart{
                            height: 0.52rem;
                        }
                    }

                }
                /* 路灯统计相关 */
                .lamp-statistics{
                    display: flex;
                    flex-direction: column;
                    height: 4.475rem;
                    .lamp-switch-block{
                        position: relative;
                        height: 0.5625rem;
                        border-bottom: 1px solid #18397b;
                        line-height: 0.575rem;
                        display: flex;
                        .lamp-switch-left{
                            width: 2.625rem;
                            height: 0.55rem;
                            text-align: center;
                            cursor: pointer;
                        }
                        .lamp-switch-center{
                            position: absolute;
                            top: 0;
                            left: 2.1625rem;
                            width: 2.9rem;
                            height: 0.55rem;
                            text-align: center;
                            cursor: pointer;
                        }
                        .lamp-switch-right{
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 2.575rem;
                            height: 0.55rem;
                            text-align: center;
                            cursor: pointer;
                        }
                        /* 选中的切换块样式 */
                        .lamp-switch-left.switch-block-active{
                            background: url(../../assets/img/sanitation/3-1-1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .lamp-switch-center.switch-block-active{
                            background: url(../../assets/img/sanitation/3-2-1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .lamp-switch-right.switch-block-active{
                            background: url(../../assets/img/sanitation/3-3-1.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        /* 未选中的切换块样式 */
                        .lamp-switch-left.switch-block-no{
                            background: url(../../assets/img/sanitation/3-1-2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .lamp-switch-center.switch-block-no{
                            background: url(../../assets/img/sanitation/3-2-2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .lamp-switch-right.switch-block-no{
                            background: url(../../assets/img/sanitation/3-3-2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                    .lamp-msg{
                        height:1.0875rem;
                        border: 1px solid #18397b;
                        display:flex;
                        flex-direction: row;
                        align-items: center;
                        li.lamp-item{
                            height:0.9rem;
                            display: flex;
                            flex-direction: column;
                            flex: 1;
                            justify-content: center;
                            align-items: center;
                            &:nth-of-type(2), &:nth-of-type(4){
                                border-left: 1px solid #18397b;
                                border-right: 1px solid #18397b;
                                box-sizing: border-box;
                            }
                            span:first-of-type{
                                span:first-of-type{
                                    font-size: 0.3rem;
                                    color: #FEA529;
                                    margin-right: 0.075rem;
                                }
                                span:last-of-type{
                                    font-size: 0.2rem;
                                    color: #ffffff;
                                }
                            }
                            span:last-of-type{
                                font-size: 0.2rem;
                                color: #ffffff;
                                margin-top: 0.0625rem;
                            }
                        }
                    }
                    #lampChart{
                        height:2.9rem;
                    }
                }
                /* 道路巡查情况统计图——案件、其他 */
                .case-statistics{
                    height: 2.4625rem; // 197px
                    .road-other-data{
                        display: flex;
                        flex-direction: row !important;
                        .left-case-data{
                            width: 2.625rem; // 210px
                            border-right: 1px solid #18397b;
                            font-size: 0.2rem;
                            color: #ffffff;
                            padding: 0.125rem;
                            li:first-of-type{
                                border-bottom: 1px solid #18397b;
                                p{
                                    line-height: 0.4375rem;
                                    #caseNum{
                                        font-size: 0.325rem;
                                        color: #FEA529;
                                        margin-right: 0.125rem;
                                    }
                                }
                            }
                            li:last-of-type{
                                padding-top: 0.125rem;
                                p{
                                    line-height: 0.375rem;
                                    #closingRate{
                                        font-size: 0.275rem;
                                        color: #FEA529;
                                    }
                                    #onTime{
                                        margin-right: 0.1875rem;
                                    }
                                }
                            }
                        }
                        #rightChart{
                            flex: 1;
                        }
                    }
                }
            }
        }
    }
}
</style>
